<script setup>
import { NGrid } from 'naive-ui';
import { getCurrentInstance, reactive, ref } from 'vue';
const { proxy } = getCurrentInstance();
</script>

<template>
  <NGrid x-gap="12">
    <NGi span="4 s:24 m:8">
      <NCard size="small">
        <NThing title="基本设置" description="系统相关设置" class="thing-cell thing-cell-on" />
        <NThing title="系统设置" description="系统相关设置" class="thing-cell" />
      </NCard>
    </NGi>
    <NGi span="20 s:24 m:16">
      <NCard size="small" title="系统设置"></NCard>
    </NGi>
  </NGrid>
</template>

<style scoped lang="scss">
.thing-cell {
  margin: 0 -16px 10px;
  padding: 5px 16px;
}

.thing-cell-on {
  background: #f0faff;
  color: #2d8cf0 !important;
}

.thing-cell-on .n-thing-main .n-thing-header .n-thing-header__title {
  color: #2d8cf0 !important;
}
</style>
